function handle_swipe_up() {
   try {
       const hide_table_div = document.getElementById('hide_table_div');
       const hide_table_button = document.getElementById('hide_table_button');
       const img = document.getElementById('hide_table_button_img');
       hide_table_div.style.height = "";
       hide_table_button.dataset.state = '隐藏菜单';
       hide_table_div.classList.add('expanded');
       img.src = 'dir/img/icon/hide_menu_icon.svg';
   } catch (error) {
       console.error('执行向上滑动回调时出错:', error);
   }
}

/**
* 处理向下滑动后执行的操作：隐藏菜单。
*/
function handle_swipe_down() {
   try {
       const hide_table_div = document.getElementById('hide_table_div');
       const hide_table_button = document.getElementById('hide_table_button');
       const img = document.getElementById('hide_table_button_img');
       hide_table_div.classList.remove('expanded');
       hide_table_div.style.height = "";
       hide_table_button.dataset.state = '显示菜单';
       img.src = 'dir/img/icon/display_menu_icon.svg';
   } catch (error) {
       console.error('执行向下滑动回调时出错:', error);
   }
}
// =================================================================
// 2. 监听函数 (Listeners)
//    这些是通用的函数，用于检测手势并调用指定的回调函数。
// =================================================================

function add_swipe_up_listener(element_id, callback, threshold = 30) {
   const target_element = document.getElementById(element_id);

   if (!target_element) {
       console.error(`未能找到ID为 "${element_id}" 的元素。`);
       return;
   }

   let start_y = 0;
   let end_y = 0;

   target_element.addEventListener('touchstart', (event) => {
       start_y = event.touches[0].clientY;
       end_y = start_y;
   }, { passive: true });

   target_element.addEventListener('touchmove', (event) => {
       end_y = event.touches[0].clientY;
   }, { passive: true });

   target_element.addEventListener('touchend', () => {
       const delta_y = end_y - start_y;
       // 向上滑动时，delta_y 为负数
       if (delta_y < -threshold) {
           callback();
       }
       start_y = 0;
       end_y = 0;
   });
}

function add_swipe_down_listener(element_id, callback, threshold = 100) {
   const target_element = document.getElementById(element_id);
   const affected_element = document.getElementById('hide_table_div');

   if (!target_element || !affected_element) {
       console.error('add_swipe_down_listener: 缺少必要的元素。');
       return;
   }

   let start_y = 0;
   let end_y = 0;
   
   // 记录拖拽开始时的实际高度
   let original_height = 0; 
   
   let is_swiping_down = false;

   target_element.addEventListener('touchstart', (event) => {
       start_y = event.touches[0].clientY;
       end_y = start_y;
       
       // 获取元素当前的实际渲染高度
       original_height = affected_element.offsetHeight; 
       
       is_swiping_down = false; 
       affected_element.style.transition = 'none';
       
   }, { passive: true });

   target_element.addEventListener('touchmove', (event) => {
       const current_y = event.touches[0].clientY;
       const delta_y = current_y - start_y;

       if (delta_y > 0) { // 只要是向下滑动
           is_swiping_down = true; 
           event.preventDefault(); 
           end_y = current_y;
           
           // 基于拖拽开始时的实际高度计算新高度
           const new_height = original_height - delta_y;
           
           // 实时修改 height 属性（不修改 maxHeight）
           affected_element.style.height = `${Math.max(0, new_height)}px`; 
       }
       
   }, { passive: false }); 

   target_element.addEventListener('touchend', () => {
       if (!is_swiping_down) {
           start_y = 0;
           return;
       }

       const delta_y = end_y - start_y;
       
       // 恢复过渡动画
       affected_element.style.transition = 'height 0.3s ease-out';
       
       if (delta_y > threshold) {
           callback(delta_y);
       } 
       affected_element.style.height = "";
       // 动画结束后移除 transition 样式
       affected_element.addEventListener('transitionend', () => {
           affected_element.style.transition = '';
       }, { once: true }); 
       
       // 重置所有状态
       start_y = 0;
       end_y = 0;
       original_height = 0;
       is_swiping_down = false;
   });
}

add_swipe_up_listener('bottom_div', handle_swipe_up);
add_swipe_down_listener('hide_table_title', handle_swipe_down);
